import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import { failIcon } from '../../../../constant/resource';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import { fetchFailed, reloadAction } from '../../actions';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isRequestFailed } = state;
  if (!isRequestFailed) return <View />;
  return (
    <View style={styles.container}>
      <Image source={failIcon} style={styles.icon} />
      <Text style={styles.desc}>网络超时 加载失败</Text>
      <Button
        textStyle={styles.backDesc}
        style={styles.back}
        text="请重试"
        onPress={(): void => {
          fetchFailed(false);
          reloadAction();
        }}
      />
    </View>
  );
};
